<template>
  <!-- 标签 -->
  <div class="hot-tags">
    <div class="hot-news-top" 
      @click="tagsHandler(item.id)" 
      v-for="item in tagLists" 
      :key="item.id"
      :class="{'active':changeTagIndex === item.id}"
    >
      <div class="hot-news-text">
        <h3 :class="{'active1':changeTagIndex === item.id}">{{item.title}}</h3>
        <p  :class="{'active2':changeTagIndex === item.id}">{{item.explain}}</p>
      </div>
      <div class="img">
        <img :src="item.img" alt="加载中...">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      //标签数据 0是非新品，1是新品
      tagLists:[
        {
          id:1,
          title:'新品首推榜',
          explain:'最优惠商品',
          img:require('../../assets/images/hot-system-new.png')
        },
        {
          id:0,
          title:'全天销量榜',
          explain:'今天销量最高商品',
          img:require('../../assets/images/hot-system-day-sale.png'),
        },
        {
          id: null,
          title:'综合销量榜',
          explain:'全网销量最高商品',
          img:require('../../assets/images/hot-system-day-sale.png'),
        },
      ],
      // 是否是新品,1是新品, 0是全天销量
      changeTagIndex: null, //默认为2，什么都不选择
    }
  },
  methods:{
    tagsHandler(id){
      // console.log(id)
      if(this.changeTagIndex === id){
        this.changeTagIndex = -2;
        this.$emit('sendTagsHandler', this.changeTagIndex)
      }else{
        this.changeTagIndex = id;
        this.$emit('sendTagsHandler', this.changeTagIndex)
      }
    }
  }
}
</script>

<style scoped>
 /* 标签 */
.hot-tags{
  display:flex;
  color:#bcbcbe;
  padding:20px 0;
}
.hot-news-top{
  display:flex;
  width: 228px;
  height: 106px;
  border:2px solid #383a43;
  border-radius:4px;
  box-sizing:border-box;
  background-color: #21232e;
  padding:28px 20px 28px 25px;
  margin-right:14px;
  cursor:pointer;
}
.hot-news-top h3{
  font-size: 20px;
  letter-spacing:4px;
  font-style:italic;
  font-weight:bold;
}
.hot-news-top p{
  font-size: 14px;
  margin-top:12px;
}
.hot-news-text .active1{
  color:#ffffff;
}
.hot-news-text .active2{
  color:#daebfd;
}
.hot-tags .img {
  width: 40px;
  height: 40px;
}
.hot-tags .img img{
  width: 100%;
  height: 100%;
  display:block;
  margin-left:27px;
}
.hot-tags .active{
  background-image:linear-gradient(to right,#3eabf4,#727dfd);
  border:none;
}
</style>
